<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <meta charset="UTF-8">
  <title>个人中心</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
  <link rel="stylesheet" href="css/style.css"/>
  <style>
    .ani{
      -webkit-animation: bulo 1.6s ease infinite;
      animation: bulo 1.6s ease infinite;
    }

    @-webkit-keyframes bulo{
      65%{ -webkit-transform: translate(0,0);}
      75%{ -webkit-transform: translate(0,8px);}
      85%{ -webkit-transform: translate(0,-4px);}
      90%{ -webkit-transform: translate(0,4px);}
      100%{ -webkit-transform: translate(0,0);}
    }
    @keyframes bulo{
      65%{ transform: translate(0,0);}
      75%{ transform: translate(0,8px);}
      85%{ transform: translate(0,-4px);}
      90%{ transform: translate(0,4px);}
      100%{ transform: translate(0,0);}
    }
  </style>
  <script>
    (function (size) {
      var docEl = document.documentElement,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
          recalc = function() {
            docEl.style.fontSize = 20*(docEl.clientWidth/size)+'px';
          };
      window.addEventListener(resizeEvt, recalc, false);
      recalc();
    })(375);
  </script>
</head>
<body>
<section class="wapper container">
  <div class="user-info">
    <div class="user-header"><i style="background-image: url(img/qb.jpg);"></i></div>
    <p class="user-name">撒的发生讲课费</p>
  </div>

  <div class="u-index">
    <div class="u-title start"></div>
    <p class="u-txt">和明星妈妈就差一丢丢的距离啦，赶紧购买产品和邀请好友参加活动助您积攒更多的星星吧！</p>
    <div class="startlist clearfix">
      <span class="pull-left">12314</span>
      <a class="pull-right" href="ranking.html">排行榜</a>
    </div>
  </div>
  <div class="u-index">
    <div class="u-title coupon"></div>
    <div class="u-coupon-con clearfix">
      <ul class="pull-left">
        <li class="ticket-box">
          <div class="ticet p-40"></div>
          <span>x3</span>
        </li>
        <li class="ticket-box">
          <div class="ticet p-10"></div>
          <span>x0</span>
        </li>
      </ul>
      <div class="pull-right">
        <a href="javascript:;" id="popbtn" class="diapers ani"></a>
      </div>
    </div>
  </div>

  <div class="btn-group">
    <a href="start.html" class="btn btn-blod">上传小票</a>
  </div>
  <div class="record-link">
    <a href="annal.html" >我的活动记录</a>
  </div>
</section>

<div class="pop">
  <div class="pop-content">
    <div class="close">&times;</div>
    <h2 class="rule-h2">活动规则</h2>
    <div class="scorllbox">
      <p class="rule-p"><strong>方法1：</strong><br>
        母婴店购买帮宝适指定纸尿裤，上传小票，每包享受20元微信现金优惠券，最多享3张优惠资格。每购买一包获一颗星！</p>
      <p class="rule-p"><strong>方法2：</strong><br>
        朋友圈分享活动给好友，好友在您分享下成功购买指定纸尿裤，您将会获得10元优惠券，并将点亮一颗星！</p>
      <p class="rule-p">赶紧购买纸尿裤和转发给好友，点亮新的优惠券吧！</p>
      <p class="rule-p">*宝洁公司有权依法进行解释未尽事宜</p>
      <p class="rule-p">*活动热线：400-6666-225</p>
      <div class="btn-group">
        <button type="button" class="btn btn-white pop-btn close-btn">我知道了</button>
      </div>
    </div>
  </div>
  <div class="pop-mask"></div>
</div>

<script src="lib/zepto.min.js"></script>
<script>
  // 点击弹出 活动规则
  var pop = $('.pop');
  $('#popbtn').tap(function () {
    pop.show();
  });
  $('.pop-mask,.close,.close-btn').tap(function () {
    pop.hide();
  });
</script>
</body>
</html>
